<template>
	<view style="height: 100%">
		<view class="weui-form__text-area" style="padding: 0">
			<image
				src="https://img.alicdn.com/tfs/TB1nzXJXmf2gK0jSZFPXXXsopXa-774-774.png"
				style="width: 200px; height: 200px; margin-top: 0px"
			></image>

			<view class="weui-form__desc" style="font-size: 25rpx; margin-top: 0px"
				>1）先连接到家庭路由器2.4G频段网络。</view
			>
			<view class="weui-form__desc" style="font-size: 25rpx; margin-top: 5px"
				>2）使用安信可Wi-Fi模组开启微信配网。</view
			>
			<view class="weui-form__desc" style="font-size: 25rpx; margin-top: 5px"
				>3）再输入家庭路由器密码,点击确定。</view
			>
		</view>

		<view class="weui-form__control-area">
			<view class="weui-cells__group weui-cells__group_form">
				<view class="weui-cells__title">家庭路由器信息</view>
				<view class="weui-cells weui-cells_form">
					<view class="weui-cell weui-cell_active weui-cell_disabled">
						<view class="weui-cell__hd">
							<label class="weui-label">SSID</label>
						</view>
						<view class="weui-cell__bd">
							<input
								class="weui-input"
								placeholder="请先连接到家庭网络"
								:value="ssid"
								@input="onInputSSID"
							/>
						</view>
					</view>
				</view>

				<view class="weui-cells">
					<view class="weui-cell weui-cell_active">
						<view class="weui-cell__hd"><label class="weui-label">密码</label></view>
						<view class="weui-cell__bd weui-flex">
							<input
								class="weui-input"
								type="text"
								placeholder="请输入家庭路由器密码"
								placeholder-class="weui-input__placeholder"
								:value="password"
								@input="onInputPassword"
							/>
							<view
								v-if="showClearBtn"
								class="weui-btn_reset weui-btn_icon weui-btn_input-clear"
								@tap="onClear"
							>
								<i class="weui-icon-clear"></i>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="weui-form__opr-area">
			<button class="weui-btn weui-btn_primary" @tap.native="onConfirm">确定</button>
		</view>

		<view class="" style="text-align: center; color: #0000004d">库版本 {{ version }}-{{ hal_version }}</view>
	</view>
</template>

<script>
	const airkiss = requirePlugin('airkiss');

	/*********** hal_version 版本迭代 ***********/
	//  211209 ：纠正输入的SSID判断长度问题
	/*************************************/

	export default {
		data() {
			return {
				ssid: '',
				password: '',
				is5G: true,
				showClearBtn: false,
				isWaring: false,
				hal_version: 211209,

				ui: {
					background: [
						{
							url: 'https://aithinker-static.oss-cn-shenzhen.aliyuncs.com/officialwebsite/banner/ESP32-C3.png',
						},
						{
							url: 'https://aithinker-static.oss-cn-shenzhen.aliyuncs.com/officialwebsite/banner/banner32.jpg',
						},
						{
							url: 'https://aithinker-static.oss-cn-shenzhen.aliyuncs.com/officialwebsite/banner/banner32.jpg',
						},
					],
					indicatorDots: true,
					vertical: false,
					autoplay: false,
					interval: 2000,
					duration: 500,
				},

				version: '',
				bssid: '',
			};
		},
		onLoad(opt) {
			this.version = airkiss.version;

			let that = this;
			uni.startWifi({
				success(res) {
					console.log(res.errMsg, 'wifi初始化成功');
					that.getWifiInfo();
				},
				fail: function (res) {
					uni.showToast({
						title: '请连接路由器!',
						duration: 2000,
						icon: 'none',
					});
				},
			});
			this.getWifiInfo();
		},
		onShareAppMessage: function () {
			/// ignore
		},
		methods: {
			getWifiInfo() {
				let that = this;
				uni.getConnectedWifi({
					success: res => {
						console.log('getConnectedWifi ok:', JSON.stringify(res));
						if ('getConnectedWifi:ok' === res.errMsg) {
							this.ssid = res.wifi.SSID;
							this.bssid = res.wifi.BSSID;
							this.is5G = res.wifi.frequency > 4900;
						} else {
							uni.showToast({
								title: '请连接路由器',
								duration: 2000,
								icon: 'none',
							});
						}
					},
					fail(res) {
						uni.showToast({
							title: '请连接路由器',
							duration: 2000,
							icon: 'none',
						});
					},
				});
			},

			onInputSSID(evt) {
				const { value } = evt.detail;
				this.ssid = value;
			},

			onInputPassword(evt) {
				const { value } = evt.detail;
				this.password = value;
				this.showClearBtn = !!value.length;
				this.isWaring = false;
			},

			onClear() {
				this.password = '';
				this.showClearBtn = false;
				this.isWaring = false;
			},

			onConfirm() {
				console.log('ssid:', this.ssid, ',password:', this.password);
				if (this.ssid == '') {
					uni.showToast({
						title: '请连接路由器',
						duration: 2000,
						icon: 'none',
					});
					return;
				}
				if (this.password.length < 8) {
					uni.showToast({
						title: '请输出不少于8位的密码',
						duration: 2000,
						icon: 'none',
					});
					return;
				}
				if (this.is5G) {
					uni.showToast({
						title: '请链接至2.4G频段的路由器',
						duration: 2000,
						icon: 'none',
					});
					return;
				}
				uni.showLoading({
					title: '配网中',
					mask: true,
				});
				//这里最好加微信小程序判断账号密码是否为空，以及其长度和是否为5G频段
				airkiss.startAirkiss(this.ssid, this.password, function (res) {
					uni.hideLoading();
					switch (res.code) {
						case 0:
							uni.showModal({
								title: '初始化失败',
								content: res.result,
								showCancel: false,
								confirmText: '收到',
							});
							break;
						case 1:
							uni.showModal({
								title: '配网成功',
								content: '设备IP：' + res.ip + '\r\n 设备Mac：' + res.bssid,
								showCancel: false,
								confirmText: '好的',
							});
							break;
						case 2:
							uni.showModal({
								title: '配网失败',
								content: '请检查密码是否正确',
								showCancel: false,
								confirmText: '收到',
							});
							break;
						default:
							break;
					}
				});
			},
		},
	};
</script>
<style>
	@import '../../weui.css';
	page {
		background-color: white;
	}
</style>
